<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>奖惩管理</title>

<link th:href="@{/js/jquery.js}" rel="stylesheet" />
<script th:href="@{/css/bootstrap.min.css}"  ></script>
<script th:href="@{/js/bootstrap.min.js}"  ></script>

<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"/>
<script src="../static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>


<style type="text/css">
	#right{
		position: absolute;
		top: 70px;
		left:300px;
		width:1200px
	}

	td{
		text-align: center;
	}
	.option{
		text-align: center;
	}
	.breadcrumb > li + li:before {
	    color: #CCCCCC;
	    content: "/ ";
	    padding: 0 5px;
	}
	.breadcrumb li a:hover{
		text-decoration: underline;
	}
	#right .breadcrumb{
		margin:  0;
		margin-bottom: 10px;
	}
	#add-div .add{
		margin: 10px 0;
	}
	.all{
		margin: 0 10px 0 0 ;
	}
	#find{
		margin: 0 10px;
	}
	#add-div .form-control{
		display: inline;
		width: 200px;
	}
	
</style>
	
</head>
<body>
<div th:replace="Top :: head"></div>
<div th:replace="Top :: left"></div>
<div id="right">
	<ul class="breadcrumb">
		<li><a href="/index">首页</a></li>
		<li>奖惩列表</li>
	</ul>
	<div id="add-div">
		<button type="button" onclick="location.href='/reward'" class="btn btn-info all">全部员工 </button>
		<input type="text" class="form-control" id="search" name="nickname" /> 
		<button id="find" type="button" class="btn btn-success">搜索</button>
		<button type="button" class="btn btn-info add btn-primary " data-toggle="modal" data-target="#myModal">新增</button>
	</div>
	<div id="table">
		<table class="table table-bordered">
			<tr>
				<td></td>
				<td>员工姓名</td>
				<td>奖惩类型</td>
				<td>奖惩原因</td>
				<td>奖惩时间</td>
				<td>奖惩金额</td>
				<td colspan="2" >操       作</td>
			</tr>
			<tr th:each="user,userStat:${userlist}">
				<td th:text="${userStat.count}"></td>
				<td th:text="${user.rw_nickname}"></td>
				<td th:switch="${user.rw_type}">
					<span th:case="1" value="1" style="color: green;" >奖</span>
					<span th:case="0" value="0" style="color: red;" >惩</span>
				</td>
				<!--<td class="typecolor" th:text="${user.rw_type==1}? '奖' : '惩'">类型</td>-->
				<td th:text="${user.rw_content}"></td>
				<td th:text="${user.rw_date}"></td>
				<td th:text="${user.rw_salary}"></td>
				<td><button type="button" class="btn btn-info modify btn-primary" data-toggle="modal" data-target="#myModal2" >修改</button></td>
				<td><input type="hidden" th:value="${user.rw_id}"/> <button type="button" class="btn btn-danger delete" >删除</button></td>
			</tr>
		</table>
	</div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					添加设置
				</h4>
			</div>
			<div class="modal-body">
				<p>员工姓名：<input type="text" id="rw_nickname" /></p>
				<p>奖惩类型：
					<select id="rw_type">
						<option value="0" >惩</option>
						<option value="1" >奖</option>
					</select>
				</p>
				<p>奖惩金额：<input type="number" id="rw_salary" /> (元)</p>
				<p>奖惩原因：<textarea style="resize: none; width: 500px; height: 100px;" type="text" id="rw_content"></textarea></p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary submit">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

<!--修改按钮模态框-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel2">
					修改设置
				</h4>
			</div>
			<div class="modal-body">
				<p >员工姓名：<input id="name" readonly='readonly' type='text' /></p>
				<p>奖惩类型：
					<select class="rw_type">
						<option value="0" >惩</option>
						<option value="1" >奖</option>
					</select>
				</p>
				<p>奖惩金额：<input type="number" class="rw_salary" /> (元)</p>
				
				<p>奖惩原因：</p>
				<p><textarea style="resize: none; width: 500px; height: 100px;" type="text" class="rw_content"></textarea></p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary update">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

		
</body>
<script>
	$(function(){
		
		
		$(".modify").click(function(){
			var id = $(this).parent().next().children("input").val()
			var name = $(this).parent().prev().prev().prev().prev().prev().text()
			var num = $(this).parent().prev().text()
			var content = $(this).parent().prev().prev().prev().text()
			var type = $(this).parent().prev().prev().prev().prev().children("span").text()
			if(type=='奖'){
				var t = 1
			}else{
				var t= 0
			}
			$("#name").val(name)
			$(".rw_content").val(content)
			$(".rw_salary").val(num)
			$(".rw_type").val(t)

			//修改模态框点击提交事件
			$(".update").click(function(){
				var nickname = $("#name").val()
				var type = $(".rw_type").val()
				var content = $(".rw_content").val()
				var salary = $(".rw_salary").val()
				$.ajax({
					type:"post",
					url:"/updateReward",
					async:false,
					data:{
						rw_nickname:nickname,
						rw_type:type,
						rw_content:content,
						rw_salary:parseFloat(salary),
						rw_id:id
					},
					success:function(data){
						if(data=="success"){
							alert("修改成功")
							$("#myModal").modal('hide')
							location.reload()
							}
						else if(data=="fail"){
							alert("添加失败，请重新输入")
						}
					}
				});
			})
		})
		
	})
	
	//执行删除点击事件
	$(".delete").click(function(){
		if(confirm("确认这条数据删除吗？")){
			var id = $(this).prev().val()
			$.ajax("delReward",{
				type:"post",
				url:"delReward",
				async:false,
				data:{
					id:id
				},
				dateType:"json",
				success:function(data){
					if(data=="success"){
						alert("删除成功")
						location.reload()
					}
				}
			});
		}
		
	})
	
	//添加模态框点击提交事件
	$(".submit").click(function(){
		var nickname = $("#rw_nickname").val()
		var type = $("#rw_type").val()
		var content = $("#rw_content").val()
		var salary = $("#rw_salary").val()
		$.ajax({
			type:"post",
			url:"addReward",
			async:false,
			data:{
				nickname:nickname,
				type:type,
				content:content,
				salary:parseFloat(salary)
			},
			success:function(data){
				if(data=="success"){
					alert("添加成功")
					$("#myModal").modal('hide')
					location.reload()
					}
				else if(data=="fail"){
					alert("添加失败，请重新输入")
				}
				else{
					$("#rw_nickname").val("")
					alert("找不到此用户，请重新输入")
				}
			}
		});
	})
	
	//搜索点击事件
	$("#find").click(function(){
		var nickname = $(this).prev().val()
		location.href="/find/"+nickname
		
	})
	

	
	
</script>
<!--设置数字不能为负数-->
<script th:inline="javascript">
$("#rw_salary").blur(function(){
	var num =$(this).val() 
	/*<![CDATA[*/ 
	    if(num < 0){
		$(this).val(0)
		alert("输入数字不能为负数")
		} 
     /*]]>*/
})
$(".rw_salary").blur(function(){
	var num =$(this).val() 
	/*<![CDATA[*/ 
	    if(num < 0){
		$(this).val(0)
		alert("输入数字不能为负数")
		} 
     /*]]>*/
})
 </script>
</html>